<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			div,span{
				width: 100px;
				height: 100px;
				background-color: green;
				display: block;
				margin: 5px;
				border: 2px solid red;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		
		<div class="yd">
			10086
		</div>
		
		<div class="lt">
			10010
		</div>
		
		<span class="dy">
			移动
		</span>
		
		<span class="lt">
			联通
		</span>
		<input id='yd' type="button" value="让移动变色"  />
		<input id='lt' type="button" value="让联通变色"  />
	</body>
	
	<script type="text/javascript" src="../../js/jquery-1.7.2.js" ></script>
	
	<script>
		
		//要求点击按钮的时候 10086 和  10086移动 便签 背景色变成红色 不允许直接用class的模式
		
		$(function(){
			
			//让移动变色
			$('#yd').click(function(){
				$('div.yd,span.dy').css({
					// 'key':'value',
					'background-color': 'red',
					'font-weight': 'bold',
					'text-align': 'center',
				});
			});
			
			//让联通变色 - 家庭作业 要求出了移动的样式之外。上下居中对齐。 字体颜色变成白色。
		});
		
	</script>
</html>
